<template>
  <div class="register-container">
    <RegisterForm @on-success-valid="handleSubmit"></RegisterForm>
  </div>
</template>
<script>
import RegisterForm from "@/components/common/RegisterForm.vue";
import { mapActions } from "vuex";

export default {
  inject: ["reload"],
  components: { RegisterForm },
  methods: {
    ...mapActions(["handleRegister", "getUserInfo"]),
    handleSubmit({ username, password, nickname, authCode }) {
      this.handleRegister({ username, password, nickname, authCode }).then(
        (res) => {
          this.getUserInfo().then((res) => {
            this.$router.push({
              name: "welcome",
              params: { dialogVisible: true },
            });
            this.reload();
          });
        }
      );
    },
  },
};
</script>
<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  background-image: url("../../assets/images/elaine-casap-qgHGDbbSNm8-unsplash.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: calc(100% - 56px);
}

.register-form {
  margin: auto;
  width: 400px;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  border: 1px solid black;
  background-color: white;
  /* margin: 150px; */
}

.title {
  height: 56px;
  line-height: 56px;
  padding: 0;
  margin: 0 auto;
  font-size: 38px;
}

.login-link:visited {
  color: blue;
}

.authcode-btn {
  position: absolute;
  right: 1px;
  top: 1px;
}
</style>